/*
 * The MIT License
 *
 * Copyright (c) 2019, Robin Schulz
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */


/*
#####################################################################
###                     general modification                      ###
#####################################################################
*/

h1 {
    text-align:center;
    font-size:28px;
}

table.pch {
    margin-top: 0px;
    border-spacing: 0;
    border: 1px solid #ddd;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

/*
#####################################################################
###                        center class                           ###
#####################################################################
*/

table.center {
    margin-left:auto;
    margin-right:auto;

    /*experiment*/
    table-layout:fixed;
    width:100%;
}

table.center th {
    width:100%;
}

table.center td {
    padding:0px;
    width:100%
}

div.center {
    width:50%;
    float: left;
    text-align: center;
}

/*
#####################################################################
###                         pch class                             ###
###    General class for ensuring not to harm non-pcm elements    ###
#####################################################################
*/

input.pch {
    text-align:center;
}


table.pch body {
    line-height: 1.42857143;
    color: #333;
}

table.pch caption {

	background-color: #383838;
    color:white;

    font-weight: bold;
    font-size: 20px;

	padding: 12px;

	border:1px solid #383838;
	border-bottom: 0px solid #ddd;

	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

table.pch  td {
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
    border-right: 1px solid #ddd;
    border-top: 1px solid #ddd;
    padding: 2px;
}


table.pch  th {
    text-align: center;
    color: #488cf9;
    background-color:#efefef;

    font-size: 16px;
    border-bottom:1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 8px;
}


table.pch tr.alternate:nth-child(even) {
    background-color: #fbfbfb;
}

table.pch th:first-child {
    border-left: 0px;
}

table.pch th:last-child {
    border-right: 0px;
}

table.pch tr td:first-child {
    border-left:0px;
}

table.pch tr td:last-child {
    border-right:0px;
}

table.pch groupBody td:last-child {
    border-right:21px;
}


/*
#####################################################################
###                      download button                          ###
#####################################################################
*/

a.download-arrow {

    font-weight:bold;
    background-color: #383838;
    color: white;

    text-decoration:none;
    border:1px solid #383838;
    border-radius:3px;
}

a.download-arrow.big {
    padding-left:30px;
    padding-right:30px;

    font-size:30px;
}

.downloadArrowWrapper {
    padding-top: 15px;
}

a.download-arrow.small {
    padding-left:14px;
    padding-right:14px;

}

a.download-arrow:hover{
    background-color: #e8e8e8;
    color: #383838;
}


/*
#####################################################################
###                      table subcaptions                        ###
#####################################################################
*/

.subcaption {
    background-color:rgb(250, 250, 250);
    color: rgba(0, 0, 0, 0.5);

    text-align:center;
    font-size: 16px;
    font-weight: bold;

    border: 1px solid rgb(232, 232, 232);
    border-radius: 3px;

    padding: 8px;
}

table.pch th.subcaption {

	background-color: rgba(56, 56, 56, 0.05);
    color:black;
    text-align: left;

    font-weight: bold;
    font-size: 16px;

	padding: 12px;

    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
	border-bottom: 1px solid #e8e8e8;

    border-radius:0px;
}

table.pch td {
    font-size: 12px;
}






table.center.pch td.subcaption-wrap {
    border-left: 5px solid white;
    border-right: 5px solid white;
}

table.center.pch tr:first-child td.subcaption-wrap {
    border-top:10px solid white;
}


/*
#####################################################################
###                      resize and collapse                      ###
#####################################################################
*/

.resizeWrapper {
    resize: vertical;
    overflow: auto;
}

.collapseButton {
  background-color: inherit;
    border:1px solid rgba(56, 56, 56, 0.4);

  border-radius: 3px;
  height:25px;
  width:25px;
  padding:0px;

  display: table-cell;
  vertical-align: middle;

  color: rgba(0, 0, 0, 0.7);
  font-weight:bold;
  text-align:center;
  float:left;
  font-size: 8px;
}

.collapseButtonWrapper {
    padding-bottom: 8px;
}

.collapseButton:hover {
  color: grey;
}

/*No ugly frame around the text*/
.collapseButton {
   outline:none;
}
.collapseButton::-moz-focus-inner {
   border: 0;
}

.collapseableContent {
  padding: 0 0px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
}


/*
#####################################################################
###                        other stuff                            ###
#####################################################################
*/

.screenFillingDiv {
    /*max-height: 70vh; /* For 100% screen height */
    height: 70vh;
    width:100%;
}

table.sortable.pch a.sortheader {
    color: #488cf9;
    background-color:#efefef;
}

.button-wrapper {
    text-align:center;
}

.target {
    color: #287bff;
}

.button {
    font-size: 12px;
}

.standard-button {
    background-color: #383838;
    font-weight:bold;
    color: white;
    border: 1px solid #383838;
    border-radius: 2px;
    padding: 12px;
    font-size: 14px;
}

.standard-button:hover{
    background-color: #e8e8e8;
    color: #383838;
}

.small-button {
    background-color: rgb(250,250,250);
    color: rgba(0, 0, 0, 0.7);

    border: 1px solid rgba(56, 56, 56, 0.05);
    border-radius: 2px;

    padding: 3px;

    font-size: 12px;
    font-weight:bold;

    outline:none;
}

.small-button::-moz-focus-inner {
    border: 0;
}

.small-button:hover{
    background-color: rgb(200, 200, 200);
    color: #383838;
}

.small-button-wrapper {
    padding: 2px;
    background-color: rgb(250,250,250);
    border: 1px solid rgb(232, 232, 232);
    border-radius:2px;
}